<!-- 知识库 -->
<script lang="ts" setup>
import NavigationBarAndImg from '@/components/NavigationBarAndImg.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

// 通过 v-if 的销毁再加载特性实现刷新效果同时避免页面滚动条不刷新
const isShow = ref(false)

const route = useRoute()
const pageId = route.query.id

onMounted(() => {
  setTimeout(() => {
    isShow.value = true
  }, 1)
})
</script>

<template>
  <div v-if="isShow">
    <NavigationBarAndImg></NavigationBarAndImg>
    <div class="knowledgeLayout">
      <div class="knowledgeBox wrapper">
        <div class="navigation">
          当前位置：
          <a href="/HomePage">首页</a>

          >
          <a href="/MoreKnowledge">{{
            pageId === 'N' ? '新闻资讯' : '知识分享'
          }}</a>

          >详情
        </div>
        <div class="title">
          <div class="top">关于2024年清明节放假通知</div>
          <div class="bottom">
            <div class="left">发布时间：2024-04-03</div>
            <div class="right">来源：星朔工作室</div>
          </div>
        </div>
        <div class="text"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
a {
  color: #7e8c8d;
  text-decoration: none;
}
.knowledgeLayout {
  .knowledgeBox {
    height: 800px;
    .navigation {
      height: 45px;
      color: #787878;
      font: 15px/45px '';
      padding: 0 12px;
      border-bottom: #c0c0c0 1px solid;
    }
    .title {
      height: 45 * 3px;
      border-bottom: #c0c0c0 1px solid;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .top {
        font: 24px/80px '';
      }
      .bottom {
        width: 220px;
        display: flex;
        justify-content: space-between;
        font: 11px '';
      }
    }
  }
}
</style>
